<template>
  <div>
    <el-form :inline="true"
             class="demo-form-inline pt10"
             label-width="85px"
             label-position="right">
            <el-form-item label="系统名称：">
              <el-select :disabled="group !== 'tenancy'" size="small" v-model="searchData.system_id" placeholder="请选择" clearable style="width:180px">
                <el-option
                  v-for="item in systemsLiteList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="机构名称：" label-width="114px">
              <el-select :disabled="institutionsLiteList.length === 0" size="small" v-model="searchData.institution_id" clearable placeholder="请选择" style="width:180px">
                <el-option
                  v-for="item in institutionsLiteList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
              <el-form-item label="前置机IP地址：" label-width="114px">
                <el-input
                  @keyup.enter.native="searchCondation"
                  size="small"
                  placeholder="请输入前置机IP地址"
                  style="width:180px;"
                  v-model="searchData.front_node_host"
                  clearable>
                </el-input>
              </el-form-item>
<!--              <el-form-item label="前置机状态：" label-width="114px">-->
<!--                <el-select size="small" v-model="searchData.front_node_state" placeholder="请选择" style="width:180px">-->
<!--                  <el-option label="全部" :value="-1"></el-option>-->
<!--                  <el-option label="离线" :value="0"></el-option>-->
<!--                  <el-option label="连接" :value="1"></el-option>-->
<!--                </el-select>-->
<!--              </el-form-item>-->
      <el-form-item class="ml20">
        <el-button type="primary" size="medium" @click="searchCondation">查询</el-button>
        <el-button type="primary" plain size="medium" @click="resetCondation">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'

export default {
  data () {
    return {
      searchData: {
        system_id: '',
        institution_id: '',
        front_node_host: '',
        // front_node_state: ''
      },
      institutionsLiteList: [], // 机构名称
    }
  },
  props: ['systemsLiteList'],
  computed: {
    ...mapGetters(['group', 'systemid'])
  },
  mounted () {
    // 这里要改成 this.group
    if(this.group === 'dept') { // 科室角色
      this.searchData.system_id = this.systemid
    }
  },
  watch: {
    'searchData.system_id':  {
      handler: function (newVal) {
        if(newVal) {
          this.institutionsLiteList = []
          this.searchData.institution_id = ''
          this.getInstitutionsLiteList(newVal)
        }
      },
      immediate: true
    }
  },
  methods: {
    searchCondation () { // 搜索
      this.$emit('searchFn', Object.assign({}, this.searchData))
    },
    resetCondation () { // 重置
      if(this.group === 'tenancy') {
        this.searchData.system_id = ''
        this.searchData.institution_id = ''
        this.institutionsLiteList = []
      }else if(this.group === 'dept') {
        this.searchData.institution_id = ''
      }
      this.searchData.front_node_host = ''
      // this.searchData.front_node_state = ''
    },
    systemNameChange(val) {
      this.institutionsLiteList = []
      this.searchData.institution_id = ''
      this.getInstitutionsLiteList(val)
    },
    async getInstitutionsLiteList(val) {
      if(val) {
        // 转换成系统ID
        // let system_id = ''
        // this.systemsLiteList.forEach((ele) => {
        //   if(ele.name === val) {
        //     system_id = ele.id
        //   }
        // })
        let res = await this.$pacsApi.pacsApi.getInstitutionsLiteList({ system_id: val })
        let { code, data } = res
        if(code === 0) {
          this.$nextTick(() => {
            this.institutionsLiteList = data
          })
        }
      }
    },
  }
}
</script>
<style lang="less" scoped>
  .el-form-item {
    margin-bottom: 5px;
  }
  .el-form--inline .el-form-item {
    margin-right: 0;
  }
</style>
